<template>
  <el-card shadow="never">
    <el-table border :data="list" v-loading="loading" height="550">
      <el-table-column type="index" align="center" />
      <el-table-column :label="$t('flowInstance.exampleID')" prop="id" align="center" width="180">
      </el-table-column>
      <el-table-column
        :label="$t('flowInstance.flowName')"
        prop="processDefinitionName"
        align="center"
      >
      </el-table-column>
      <el-table-column
        :label="$t('flowInstance.flowKey')"
        prop="processDefinitionKey"
        align="center"
      >
      </el-table-column>
      <el-table-column
        :label="$t('flowInstance.flowVersion')"
        prop="processDefinitionVersion"
        align="center"
      >
        <template #default="scope">
          {{ scope.row.processDefinitionVersion.toFixed(1) }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('flowInstance.sponsor')" prop="startUserId" align="center">
      </el-table-column>
      <el-table-column :label="$t('flowInstance.startDate')" align="center" show-overflow-tooltip>
        <template #default="scope">
          {{ $dayjs.formateDate(scope.row.startTime, 'YYYY-MM-DD hh:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('flowInstance.flowStatus')" align="center">
        <template #default="scope">
          {{
            scope.row?.proinsBusState?.state ? flowStatus[scope.row?.proinsBusState?.state] : 'NULL'
          }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('flowInstance.endDate')" align="center" show-overflow-tooltip>
        <template #default="scope">
          {{ $dayjs.formateDate(scope.row.endTime, 'YYYY-MM-DD hh:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column width="460" :label="$t('common.operate')" fixed="right" align="center">
        <template #default="scope">
          <el-button v-limit="'LCZX:LCKZ:LCSL:FLOW'" size="small" @click="onTranceFlow(scope.row)">
            {{ $t('routes.flowTracking') }}
          </el-button>
          <el-button
            v-limit="'LCZX:LCKZ:LCSL:JUMP'"
            type="primary"
            size="small"
            @click="jumpFree(scope.row)"
            :disabled="
              scope.row.proinsBusState?.state == 2 ||
              scope.row.proinsBusState?.state == 5 ||
              scope.row.proinsBusState?.state == 6
            "
          >
            {{ $t('button.freeJump') }}
          </el-button>
          <el-button
            v-limit="'LCZX:LCKZ:LCSL:FOECEOVER'"
            size="small"
            @click="closeFlowInstance(scope.row)"
            :disabled="
              scope.row.proinsBusState?.state == 2 ||
              scope.row.proinsBusState?.state == 5 ||
              scope.row.proinsBusState?.state == 6
            "
          >
            {{ $t('flowInstance.forceFlow') }}
          </el-button>
          <el-button
            v-limit="'LCZX:LCKZ:LCSL:DISCARD'"
            size="small"
            @click="discardFlowInstance(scope.row)"
            :disabled="
              scope.row.proinsBusState?.state == 2 ||
              scope.row.proinsBusState?.state == 5 ||
              scope.row.proinsBusState?.state == 6
            "
          >
            {{ $t('flowInstance.discardFlow') }}
          </el-button>
          <el-button
            v-limit="'LCZX:LCKZ:LCSL:DELETE'"
            type="danger"
            size="small"
            @click="deleteRecord(scope.row)"
            :disabled="
              scope.row.proinsBusState?.state == 2 ||
              scope.row.proinsBusState?.state == 5 ||
              scope.row.proinsBusState?.state == 6
            "
          >
            {{ $t('common.del') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="pagination?.current"
      :page-size="pagination?.size"
      layout="total, prev, pager, next, jumper"
      :total="pagination?.total"
      @current-change="changePage"
    />
  </el-card>
  <jump-flow
    v-if="jumpFreedomInfo.visible"
    v-model:visible="jumpFreedomInfo.visible"
    :proInsId="jumpFreedomInfo.proInsId"
    :procDefId="jumpFreedomInfo.procDefId"
    :updateData="updateData"
  />
  <trance-flow v-model:visible="tranceFlowInfo.visible" :data="tranceFlowInfo.data" />
</template>

<script>
import { computed, reactive } from 'vue'
import { MESSAGE_IDS, OPTIONS } from '../config'
import { formatMessages } from '@/utils/useFormatMessage'
import { ElMessageBox } from 'element-plus'
import JumpFlow from '@/components/JumpFlow'
import TranceFlow from './TranceFlow'
import { useStore } from 'vuex'
import { useI18n } from 'vue-i18n'

export default {
  components: {
    JumpFlow,
    TranceFlow,
  },
  emits: ['close'],
  setup() {
    const messages = formatMessages(MESSAGE_IDS)
    const { state, dispatch, commit } = useStore()
    const { t } = useI18n()
    let jumpFreedomInfo = reactive({
      visible: false,
      procDefId: null,
      proInsId: null,
    })

    let tranceFlowInfo = reactive({
      visible: false,
      data: {},
    })

    //删除流程
    const deleteRecord = ({ id }) => {
      ElMessageBox.prompt(t('flowInstance.reason'), t('flowDDesign.deleteFlow'), {
        confirmButtonText: t('flowInstance.ok'),
        cancelButtonText: messages.cancelText,
        inputValidator: (value) => {
          if (value) return true
          return false
        },
        inputErrorMessage: messages.required,
      }).then(({ value }) => {
        dispatch('flowInstance/deleteRecordRequest', {
          procInsId: id,
          reason: value,
        })
      })
    }

    //强制办结
    const closeFlowInstance = ({ id }) => {
      ElMessageBox.prompt(t('flowInstance.reason'), t('flowInstance.foreFlow'), {
        confirmButtonText: t('flowInstance.ok'),
        cancelButtonText: messages.cancelText,
        inputValidator: (value) => {
          if (value) return true
          return false
        },
        inputErrorMessage: messages.required,
      }).then(({ value }) => {
        dispatch('flowInstance/closeFlowRequest', {
          processInstanceId: id,
          comment: value,
        })
      })
    }

    //废弃流程
    const discardFlowInstance = ({ id }) => {
      ElMessageBox.prompt(t('flowInstance.reason'), t('flowInstance.discardFlow'), {
        confirmButtonText: t('flowInstance.ok'),
        cancelButtonText: messages.cancelText,
        inputValidator: (value) => {
          if (value) return true
          return false
        },
        inputErrorMessage: messages.required,
      }).then(({ value }) => {
        dispatch('flowInstance/discardFlowRequest', {
          processInstanceId: id,
          comment: value,
        })
      })
    }

    // 自由跳转
    const jumpFree = ({ id, processDefinitionId }) => {
      jumpFreedomInfo.visible = true
      jumpFreedomInfo.procDefId = processDefinitionId
      jumpFreedomInfo.proInsId = id
    }

    //流程追踪
    const onTranceFlow = ({ id, processDefinitionId }) => {
      tranceFlowInfo.visible = true
      tranceFlowInfo.data = {
        processIntanceId: id, //流程实例id
        processDefinitionId: processDefinitionId, //流程定义id
      }
    }

    return {
      deleteRecord,
      jumpFreedomInfo,
      tranceFlowInfo,
      jumpFree,
      onTranceFlow,
      options: OPTIONS,
      closeFlowInstance,
      discardFlowInstance,
      loading: computed(() => state.flowInstance.loading),
      list: computed(() => state.flowInstance.list),
      flowStatus: computed(() =>
        state.flowInstance.flowStatus.reduce(
          (rst, cur) => Object.assign(rst, { [cur.stateNum]: cur.name }),
          {}
        )
      ),
      pagination: computed(() => state.flowInstance.pagination),
      updateData: () => dispatch('flowInstance/fetchListRequest'),
      changePage: (page) => {
        commit('flowInstance/SAVE_PAGINATION', {
          pageNum: page,
        })
        dispatch('flowInstance/fetchListRequest')
      },
    }
  },
  created() {
    const { dispatch } = useStore()
    dispatch('flowInstance/fetchFlowStatus')
  },
}
</script>

<style scoped>
.el-pagination {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
